<template>
  <header class="header" :style="navStyle">
    <div class="toggleBtn" @click="toggleNav">
      <IconEpArrowLeft :class="{ 'rotate': navToggle }" />
    </div>
    <transition name="fade">
      <div v-show="!navToggle" class="wrapper">
        <ChatList />
        <ChatUser />
      </div>
    </transition>
  </header>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import ChatList from '@/components/chat/list.vue'
import ChatUser from "@/components/chat/user.vue"

const navToggle = ref(false)

const navStyle = computed(() => ({
  '--nav-width': navToggle.value ? '0px' : '230px',
}))

const toggleNav = () => {
  navToggle.value = !navToggle.value
}
</script>

<style scoped lang="scss">
.header {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  border-right: 1px solid var(--color-border);
  transition: all 0.3s;
  width: var(--nav-width);
  padding: var(--nav-padding);

  .wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .toggleBtn {
    height: 24px;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-background);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
    cursor: pointer;
    box-shadow: 0 2px 4px 0px rgba(0, 0, 0, .06);
    border-radius: 50%;
    border: 1px solid var(--color-border);
    transition: transform 0.3s;

    .rotate {
      transform: rotate(180deg);
    }
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>